<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>页面 Pages-JQUERY MOBILE 中文API站</title>

<link rel="stylesheet" type="text/css" href="../../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css" />
<script type="text/javascript" src="../../style/lib/Jquery126.js" tppabs="http://www.jqmapi.com/style/lib/Jquery126.js"></script>
 </script>
<script type="text/javascript" src="../../style/Jqueryapi.js" tppabs="http://www.jqmapi.com/style/Jqueryapi.js"></script>
<link rel="shortcut icon" href="../../style/img/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<hr style="color:#595959;" />

<div class="content">
  <h1>预读取页面 Prefetching pages</h1>
  <div class="desc">
				  <div>通常，把不同的page存储在多个html文档是要比用一个大的保存多个page容器的文档要好。这样每个页面的dom会少一些。</div>
				  <div>当使用单一page的文档时，你可以把page预加载到dom中，这样用户在访问时可以立即打开。要预加载一个页面，给指向这个页面的链接添加<strong>data-prefetch</strong>属性。jQueryMobile会在加载完当前页面之后在后台自动加载目标页面，pagecreate事件会被触发。例如：</div>
                    <div class="code">
				  <pre>&lt;a href="prefetchThisPage.html" data-prefetch&gt; ... &lt;/a&gt;</pre>
                    </div>
				  <div>你可以预加载随意多个页面，只需要将要预加载的链接加上<strong>data-prefetch</strong>属性。或者你，可以在js里调用<strong>$.mobile.loadPage()</strong>方法来设置预加载。</div>
  </div>
                      <div class="code">
				  <pre>$.mobile.loadPage( pageUrl, { showLoadMsg: false } );</pre>
                      </div>
                      
  <div class="desc">
				  <div>预加载页面的另一个好处就是用户在预加载页面的时候不会看到ajax加载信息。ajax加载信息只会在框架还没有完成预加载那个页面的情况下出现。</div>
    <div>预加载页面自然会有http请求并且占带宽，所以建议只在接下来很可能会被访问到的页面使用这个特性。比如说图片相册，你可以预加载“上一张”和“下一张”图片这样用户就可以在图片间快速跳转。</div>
  </div>
                  
  <h1>DOM容量管理 DOM size management</h1>  
  <div class="desc">
				  <div>为了使页面转场动画生效，转场的来自和到达页面都需要在DOM中。但是把原有的页面存在DOM中会很大量消耗浏览器的内存占用，这可能会导致一些手机的浏览器变慢甚至崩溃。</div>
				  <div>所以jqm框架制定了一个简单的机制来保持dom的整洁。当通过AJAX加载了一个页面之后。jqm就会把这个页面标记为 “需要在导航到别的页面后将这个页面从DOM中移除”。当你再次访问已经移除的页面，浏览器可以从缓存中找回这个html文件。如果没有，那

就要从服务器再读取（比如说嵌套的列表，jqm会在你导航到不是属于列表的页面后从dom移除所有列表的页面）。</div>  
				  <div>包含多个page的文档不会应用这个特性-jqm只会移除通过ajax加载的页面。</div>            
  </div>

   <h1>在dom中缓存page Caching pages in the DOM</h1>  
  <div class="desc">
				  <div>如果想要的话，你可以使jQuery Mobile在dom中保存之前访问过的页面而不是移除他们。这样用户在回到这个页面的时候就可以迅速加载。</div>
				  <div>要让所有曾经访问过的pages都缓存进DOM，设置<strong>domcache</strong>选项为<strong>true</strong>,</div>  
				<p class="indent"><strong>HTML 代码:</strong></p>      
    <div class="code">
				  <pre>$.mobile.page.prototype.options.domCache = true;</pre>
                    </div>
			<p class="indent">或者你可以缓存特定的某个页面，给page容器添加如下属性。</p>  
                      <div class="code">
				  <pre>&lt;div data-role="page" id="cacheMe" data-dom-cache="true"&gt;</pre>
                      </div>
			<p class="indent">或者通过程序来控制:</p>  
                      <div class="code">
				  <pre>pageContainerElement.page({ domCache: true });  </pre>
                      </div>
				  <div>DOM缓存的缺点是DOM可能会变得很大，某些设备上

会导致变慢或者内存问题。如果你开启了dom缓存，

请一定要管理好DOM并且把你的网站在真机上测试好

。</div>  
  </div>
</div>
</div>
<iframe id="iFrame1" width="160px" scrolling="no" frameborder="0" allowtransparency="true" src="../../adsense_r.html" tppabs="http://www.jqmapi.com/adsense_r.html" onload="this.height=iFrame1.document.body.scrollHeight" ></iframe>
</body>
</html>



